<template>
  <div class="per-info">

    <el-menu
      router
      :default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#fff"
      text-color="black"
      active-text-color="#ffd04b"
      :unique-opened=true
      @open="handleOpen"
      @close="handleClose"
      menu-trigger="hover"
    >
      <el-submenu index="2">
        <template slot="title">

          <router-link
            to="/home/myIndex"
            tag="li"
          >
            <span class="mui-icon mui-icon-person"></span><span>ice li</span>
          </router-link>
        </template>

        <el-menu-item index="/home/myIndex">我的主页</el-menu-item>
        <el-menu-item index="/home/group">我的小组</el-menu-item>
        <el-menu-item index="/home/myIndex/mylike">我的喜欢</el-menu-item>
        <el-menu-item index="/home/myIndex/myfocus">我的关注</el-menu-item>
        <el-menu-item index="/home/vip">申请认证</el-menu-item>
        <el-menu-item index="/home/setmess">设置</el-menu-item>
        <el-menu-item index="/home/homemain">退出</el-menu-item>

      </el-submenu>

      <el-submenu
        index="/home/text"
        class="message"
      >
        <template slot="title">

          <router-link
            to="/home/mess"
            tag="li"
          >

            <span class="mui-icon mui-icon-email">
              <span class="mui-badge mui-badge-danger">45</span></span>

          </router-link>
        </template>

        <el-menu-item-group>

          <el-menu-item index="3-1">评论<span
              class="mui-badge mui-badge-danger"
              style="float:right; margin-top:10px;"
            >45</span></el-menu-item>
          <el-menu-item index="3-2">喜欢<span
              class="mui-badge mui-badge-danger"
              style="float:right; margin-top:10px;"
            >45</span></el-menu-item>
          <el-menu-item index="3-3">支持<span
              class="mui-badge mui-badge-danger"
              style="float:right; margin-top:10px;"
            >45</span></el-menu-item>
          <el-menu-item index="3-4">收藏<span
              class="mui-badge mui-badge-danger"
              style="float:right; margin-top:10px;"
            >45</span></el-menu-item>
        </el-menu-item-group>

        <el-menu-item-group>
          <template slot="title">——— 系统 ———</template>
          <el-menu-item index="3-5">私信<span
              class="mui-badge mui-badge-danger"
              style="float:right; margin-top:10px;"
            >45</span></el-menu-item>
          <el-menu-item index="3-6">通知<span
              class="mui-badge mui-badge-danger"
              style="float:right; margin-top:10px;"
            >45</span></el-menu-item>

        </el-menu-item-group>

      </el-submenu>
      <el-submenu index="4">
        <template slot="title">

          <router-link
            to="/home/text"
            tag="li"
          >
            <el-button
              type="warning"
              round
            >发布</el-button>
          </router-link>
        </template>

        <el-menu-item index="4-1">发照片</el-menu-item>
        <el-menu-item index="4-2">发文章</el-menu-item>

      </el-submenu>

    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath){
      if(keyPath=="/home/homemain"){
        
      }
    }
  },
  components: {}
};
</script>
<style lang="scss" scoped>
.per-info {
  height: 66px;
  .el-menu-demo {
    border-bottom: solid 1px #fff;
    height: 66px;

    .mui-icon .mui-badge {
      top: 5px;
      margin-left: -15px;
    }
    .message {
      padding: 0 10px;
    }
  }
}
</style>

